<meta charset="utf-8">
    <title>股东等级</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="网站描述">
    <meta name="keywords" content="">
    <meta name="author" content="wangl">
    <link rel="icon" href="http://ow9lg82yy.bkt.clouddn.com/24f5c360-485d-4a6d-9468-2a61c353cf37.ico">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all">
    <style>
        .layui-input{ width: 120px; display: inline-block; margin: 0 10px;}
    </style>
</head>
<body class="childrenBody">
<div class="layui-col-xs12" id="app">

    <div class="layui-form users_list">

        <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
            <thead>
            <tr>

                <th data-field="pageId">
                    <div class="layui-table-cell laytable-cell-1-pageId"><span>股东等级</span></div>
                </th>
                <th data-field="hangSaleId">
                    <div class="layui-table-cell laytable-cell-1-hangSaleId"><span>交易量条件（x）</span></div>
                </th>
                <th data-field="hangSaleUser">
                    <div class="layui-table-cell laytable-cell-1-hangSaleUser"><span>当前等级人数</span></div>
                </th>
            </tr>
            </thead>
            <tbody id="list">
                <tr v-for="(item, index) in listArr">
                    <td>V{{item.level}}</td>
                    <td>
                        <input type="text" :value="item.low" class="layui-input" readonly @change="inputEdit($event, 1, index)">
                        < X ≤
                        <input v-if='item.high != "-1"' type="text" :value="item.high" class="layui-input" @change="inputEdit($event, 2, index)">
                        <input v-if='item.high == "-1"' type="text" :value="item.high" class="layui-input" readonly>
                    </td>
                    <td>{{item.count}}</td>
                </tr>
            </tbody>
        </table>

    </div>
</div>
</body>
<script type="text/javascript" src="/static/js/vue.min.js"></script>
<script type="text/javascript" src="/static/js/axios.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.all.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            listArr: []
        },
        created:function(){
            this.getData();
        },
        mounted:function(){

        },
        methods: {
            getData:function(){
                var self = this;
                axios({
                    url: '/back/admin/shareholderLevel/list',
                    method: 'GET',
                    cache: false,
                    dataType: 'json',
                    data: {}
                })
                .then(function (res) {
                    if(res.data.code == 0){
                        self.listArr = res.data.data;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
//                this.listArr = [
//                    {name: 'V1', min: 0, max: 1000, num: 1000},
//                    {name: 'V2', min: 1000, max: 2000, num: 0},
//                    {name: 'V3', min: 2000, max: 3000, num: 0},
//                    {name: 'V4', min: 2000, max: 3000, num: 0},
//                    {name: 'V5', min: 2000, max: 3000, num: 0},
//                    {name: 'V6', min: 2000, max: 3000, num: 0},
//                    {name: 'V7', min: 2000, max: 3000, num: 0},
//                    {name: 'V8', min: 2000, max: 3000, num: 0},
//                    {name: 'V9', min: 2000, max: 3000, num: 0},
//                    {name: 'V10', min: 2000, max: 3000, num: 0}
//                ];
            },
            inputEdit:function(e, type, index){
                var self = this;
                var item = this.listArr[index];
                var thisVal = e.target.value;
                if(item.count > 0){
                    layer.alert("当前等级已有股东，无法修改", function(){
                        if(type==1){
                            e.target.value = item.low;
                        }
                        else{
                            e.target.value = item.high;

                        }
                        layer.closeAll();
                    });
                    return false
                }

                if(type==1){
                    //编辑最小值
                    if(index==0){
                        if(thisVal<0){
                            layer.alert("最低交易量为0", function(){
                                e.target.value = 0;
                                layer.closeAll();
                            });
                            return false
                        }
                        console.log('提交')
                    }

                    else{
                        if(!(thisVal > self.listArr[index-1].low)){
                            layer.alert("最低交易量需大于上一等级最低交易量", function(){
                                e.target.value = item.low;
                                layer.closeAll();
                            });
                            return false
                        }
                        console.log('提交')
                    }

                    //self.listArr[index-1].high = thisVal;
                    axios({
                        url: '/back/admin/shareholderLevel/update?levelId='+item.levelId+'&low='+thisVal+'&high='+item.high,
                        method: 'POST',
                        cache: false,
                        dataType: 'json',
                        data: {}
                    })

                    .then(function (res) {
                        if(res.data.code == 0){
                            layer.alert("操作成功", {icon: 1}, function(){
                                layer.closeAll();
                                self.getData();
                            });
                        }
                        else{
                            layer.alert(res.data.msg, {icon: 5}, function(){
                                layer.closeAll();
                            });
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                }
                else{
                    //编辑最大值
                    if(index==(self.listArr.length-1)){
                        if(thisVal < item.low){
                            layer.alert("最高交易量需大于最低交易量", function(){
                                e.target.value = item.high;
                                layer.closeAll();
                            });
                            return false
                        }
                        console.log('提交')
                    }
                    else{
                        if(!(thisVal < self.listArr[index+1].high)){
                            layer.alert("最高交易量需小于下一等级最高交易量", function(){
                                e.target.value = item.high;
                                layer.closeAll();
                            });
                            return false
                        }
                        if(thisVal < item.low){
                            layer.alert("最高交易量需大于最低交易量", function(){
                                e.target.value = item.high;
                                layer.closeAll();
                            });
                            return false
                        }
                        console.log('提交')
                    }
                    //self.listArr[index+1].low = thisVal;
                    axios({
                        url: '/back/admin/shareholderLevel/update?levelId='+item.levelId+'&low='+item.low+'&high='+thisVal,
                        method: 'POST',
                        cache: false,
                        dataType: 'json',
                        data: {}
                    })
                    .then(function (res) {
                        if(res.data.code == 0){
                            layer.alert("操作成功", {icon: 1}, function(){
                                layer.closeAll();
                                self.getData();
                            });
                        }
                        else{
                            layer.alert(res.data.msg, {icon: 5}, function(){
                                layer.closeAll();
                            });
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                }

            }
        }
    })
</script>

